<template>
  <div class="app-container">
    <el-timeline-item v-for="(item, index) in processInstanceInfo.bpmTaskVoList" :key="index" :icon="getIcon(item)" :type="getType(item)" >
      <p style="font-weight: 700">任务：{{ item.name }}</p>
      <el-card :body-style="{ padding: '10px' }">

        <div>
          <label v-if="item.assignee" style="font-size: 15px">审批人：</label>
          <label style="font-weight: normal; font-size: 15px">
            {{ item.assignee }}
          </label>
        </div>
        <div>
          <label v-if="item.startTime" style="font-size: 15px;font-weight: bold">创建时间：</label>
          <label style="font-weight: normal; font-size: 15px">
            {{ item.startTime }}
          </label>
        </div>
        <div>
          <label v-if="item.endTime" style="font-size: 15px">
            审批时间：
          </label>
          <label v-if="item.endTime" style="font-weight: normal; font-size: 15px">
            {{ item.endTime }}
          </label>
        </div>
        <div>
          <label v-if="item.useTime" style="font-size: 15px">
            耗时：
          </label>
          <label v-if="item.useTime" style="font-weight: normal; font-size: 15px">
            {{ item.useTime }}
          </label>
        </div>
        <div v-if="item.commentList && item.commentList.length > 0">
          <div v-for="comment in item.commentList" :key="comment.id">
            <label  style="font-size: 15px">
              状态：
            </label>
            <label style="font-weight: normal; font-size: 15px">
              {{ comment.type }}
            </label>
          </div>
        </div>
      </el-card>
    </el-timeline-item>
  </div>
</template>

<script>


export default {
  name: "TransferRecords",
  data() {
    return {
      //激活标签页名称
      activeName: 'transferRecords',
    };
  },
  props:{
    processInstanceInfo:{
      type:Object,
      default:{},
      require:true
    }
  },
  created() {

  },
  methods: {
    getIcon(item){
      if (item.taskState === 'Active') {
        return 'el-icon-time'
      }
      if (item.taskState === 'Completed') {
        return 'el-icon-check'
      }
      if (item.taskState === 3) {
        return 'el-icon-close'
      }
      if (item.taskState === 4) {
        return 'el-icon-remove-outline'
      }
      return ''
    },

    /** 获得任务对应的颜色 */
    getType(item) {
      if (item.taskState === 'Active') {
        return 'primary'
      }
      if (item.taskState === 'Completed') {
        return 'success'
      }
      if (item.taskState === 3) {
        return 'danger'
      }
      if (item.taskState === 4) {
        return 'info'
      }
      return ''
    }

  }
};
</script>
